<template>
	<uni-list :border="false">
		<uni-list-chat v-for="(item,index) in aa" :key="index" :avatar-circle="true" :title="item.name"
			avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
			:note="'闲置 '+ computNum(item.num) +' 件'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+concernDate(item.data)"
			badge-positon="left">

			<view class="chat-custom-right">
				<image @click="shareToggle" src="../../../static/concern_static/icon_more.png" mode=""
					style="padding:13rpx 0rpx; width: 30px;height: 30px;"></image>
			</view>
		</uni-list-chat>
	</uni-list>
	<view class="">
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<view @click="OnUnfollow" class="Unfollow">
				<view class="Unfollow-text">
					<image style="height: 30px; width: 30px; margin-right: 10px;"
						src="../../../static/concern_static/分享.png" mode=""></image>
					<view class="size">
						取消关注
					</view>
				</view>
			</view>
			<view class="Cancel">
				<button style="background-color: #fff;" type="default" @click="onCancel">取消</button>
			</view>
		</uni-popup>

	</view>
	<view v-if="succeed" class="caoz" :class="succeed?'caoz caozout':'caoz'">
		<view class="">
			操作成功
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	let share = ref(null)
	let succeed = ref(false)
	let coaz = ref(null)
	let aa = reactive([{
		name: '张三',
		num: 1,
		data: '2023-05-16 14:20'
	}, {
		name: '张三',
		num: 15,
		data: '2022-04-20 14:20'
	}])
	let concernDate = computed(() => {
		return time => {
			// console.log(time);
			let ptime = new Date(time).getTime()
			const twentyFourHours = 24 * 60 * 60 * 1000
			const fortyEightHours = 24 * 60 * 60 * 1000 * 2;
			const date = new Date()
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const today = `${year}-${month}-${day}`;
			const todayTime = new Date(today).getTime();
			const yesterdayTime = new Date(todayTime - twentyFourHours).getTime();
			const lastYesterdayTime = new Date(todayTime - fortyEightHours).getTime();
			if (ptime >= todayTime) {

				return '关注于 今天 ' + time.split(' ')[1];
			} else if (ptime < todayTime && yesterdayTime <= ptime) {

				return '关注于 昨天 ' + time.split(' ')[1];
			} else if (ptime < yesterdayTime && lastYesterdayTime <= ptime) {
				return '关注于 前天 ' + time.split(' ')[1];
			} else {

				return '关注于 ' + time;
			}
			return time
		}
	})
	let computNum = computed(() => {
		return (num) => {
			if (num > 10) {
				return num
			}
			num = '0' + num
			return num
		}
	})

	const shareToggle = () => {

		share.value.open()
	}
	const onCancel = () => {
		share.value.close()
	}

	function OnUnfollow() {
		succeed.value = true
		share.value.close()
		console.log(coaz.value);
		let time = setTimeout(() => {
			succeed.value = false
			clearInterval(time)
		}, 3000)
	}
</script>

<style lang="less" scoped>
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.Unfollow {
		position: relative;
		background-color: #ffffff;
		top: -70px;
		z-index: 1;
		margin-bottom: 10px;

		.Unfollow-text {
			display: flex;
			align-items: center;
			padding: 15px;

			.size {
				font-size: 18px;
			}
		}
	}

	.Cancel {
		margin-top: -65px;

		button::after {
			border: none;
		}
	}

	.caoz {
		position: absolute;
		background-color: #fff;
		padding: 5px;
		bottom: 150px;
		text-align: center;
		width: 100%;
		// display: none;
		view {
			background-color: #dedede;
			padding: 5px;
			width: 20%;
			margin: auto;
			// border-radius: 10px;
		}


	}

	@keyframes sss {
		from {
		
		}
		50%{
			opacity: 0.1;
		}
		90%{
			opacity: 0.1;
		}
		to {
		   opacity: 0;
		  }
	}

	.caozout {
		
		animation: sss 3s 1 linear ;
	}
</style>